<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<uni-nav-bar color="#fff" @clickLeft="back" backgroundColor="transparent"  :border="false" :fixed="true" :statusBar="true">
			<block v-slot:left>
				<uni-icons  type="back" size="25" color="#000"></uni-icons>
			</block>
			<view class="navbartitle">
				{{data.statelist[data.publicInfo.state]}}
			</view>

		</uni-nav-bar>

		<view class="content">


			<view class="header" v-if="data.publicInfo.state!=0">
				<image src="https://img.fubaozx.cn/static/oldImg/16995018676963.png" mode=""></image>
				<view class="right">
					<view class="info">
						<view class="infos">
							<text class="name">{{data.publicInfo.name}}</text>{{data.publicInfo.mobile}}
						</view>
					</view>
					<view class="address">
						{{data.publicInfo.province}} {{data.publicInfo.city}} {{data.publicInfo.area}} {{data.publicInfo.street}} {{data.publicInfo.detailed}}
					</view>
				</view>
			</view>
			<view class="goodsbox">
<!-- 				<view class="business">
					<image :src="data.publicInfo.business.shop_head?data.publicInfo.business.shop_head:''" mode=""  v-if="data.publicInfo.business.shop_head"></image>
					{{data.publicInfo.business.name?data.publicInfo.business.name:'自营商品'}}
				</view> -->
				<view   v-for="(tiem,index) in data.commodityInfo" :key="index">
					<view class="goods" v-for="(items,indexs) in tiem" :key="indexs" @click="toGoodsDe(items)">
						<image :src="items.goods.img" mode=""></image>
						<view class="right">
							<view class="name">
								{{items.goods.name}}
							</view>
							<view class="gg">
								规格：{{items.attributes}}
							</view>
							<view class="num">

								<text style="color: #976029;font-size: 32rpx;">￥{{$toFiexd((items.price+items.coupon),2)}}</text>
								<text>X{{items.number}}</text>
							</view>
						</view>
					</view>
				</view>

<!-- 				<view class="titlebox">
					<view class="titleboxl">
						商品金额
					</view>
					<view class="titleboxr">
						￥{{$toFiexd(data.totalPrice,2)}}
					</view>
				</view> -->

			<!-- 	<view class="titlebox">
					<view class="titleboxl">
						买家留言：{{data.remarks}}
					</view>
				</view> -->

			</view>

      <view class="reason " v-if="data.state==8">
        买家留言：{{data.publicInfo.reason}}
      </view>

			<view class="goodsbox" >
				<view class="titleboxss">
					<view class="titleboxsl">
						订单编号：
					</view>
					<view class="titleboxsr">
						{{data.publicInfo.order}}
					</view>
				</view>
				<view class="titleboxss"  v-if="data.publicInfo.state!=0">
					<view class="titleboxsl">
						支付方式：
					</view>
					<view class="titleboxsr">
						{{['消费券','微信','支付宝','支付宝','银行卡','补贴券'][data.publicInfo.pay_type]}}
					</view>
				</view>
				<view class="titleboxss">
					<view class="titleboxsl">
						下单时间：
					</view>
					<view class="titleboxsr">
						<uni-dateformat :date="data.timeStamp"></uni-dateformat>
						<!-- {{data.publicInfo.CreatedAt}} -->
					</view>
				</view>
				<view class="titleboxss">
					<view class="titleboxsl">
						配送方式：
					</view>
					<view class="titleboxsr">
						{{data.publicInfo.take==0?"普通配送":"自提"}}
					</view>
				</view>
				<view class="titleboxss" v-if="data.publicInfo.take==0">
					<view class="titleboxsl">
						快递运费：
					</view>
					<view class="titleboxsr">
						{{$toFiexd(data.publicInfo.freight,2)}}
					</view>
				</view>
				<view class="titleboxss" v-if="data.publicInfo.deal_time">
					<view class="titleboxsl">
						完成时间：
					</view>
					<view class="titleboxsr">
						{{data.publicInfo.deal_time}}
					</view>
				</view>

			</view>
		</view>
		<view style="height: 73px;">

		</view>
		<view class="footer"  v-if="data.publicInfo.state==0">
		<!-- 	<view class="left">
				取消订单
			</view> -->
			<view class="right l_f_r_c_c"  @click="$goURl('/pages/order/createorder?id='+data.order)">
				立即支付:{{payNum.toFixed(2)}}
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref, reactive, getCurrentInstance, computed} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	let data =reactive({
		order:'',			//订单号
		commodityInfo:[],	//商品信息
		publicInfo:'',		//获取第一条公共信息
		timeStamp:'',		//时间戳
		totalPrice:'',		//总价
		statelist:['待付款','待发货','待收货','待评价','已完成'],
		state:0
	})
	function back(){
		uni.navigateBack()
	}
  const payNum= computed(()=>{
    let num=0
    console.log(data.commodityInfo[0])
      data.commodityInfo[0].forEach(item=>{
        num += item.price*item.number
      })
    return num
  })
	onLoad((option)=>{
		data.order = option.order

		data.state= Number(option.state)
	})
	onShow(()=>{
		orderDetails()
	})

	function toGoodsDe(items) {
		if(items.goods.ID == 0) {
			uni.showToast({
				icon: 'none',
				title: '商品已下架!'
			})
			return
		}

		proxy.$goURl(`/pages/commodity/details?id=${items.goods_id}`)
	}
	// 取消订单
	function orderDetails(){
		proxy.$request({
			url:`api/order/`,
			method:'PUT',
			data:{
				order:data.order,
				state:data.state
			},
			success:(res)=>{
				if(res.errno==0){
					console.log(res)
					//商品信息
					data.commodityInfo = res.data
					//获取第一条公共信息
					for (let var1 in res.data) {
						console.log(res.data[var1][0])
						data.publicInfo=res.data[var1][0]
						let min = res.data[var1]
						let values = min.reduce((total, item) => {
							return total + (item.price+item.coupon)*item.number
						},0);
						data.totalPrice = values
						let time = res.data[var1][0].CreatedAt
						data.timeStamp = new Date(time).getTime()
					}
					// data.publicInfo = res.data[0]
					// // 获取时间戳
					// let time = res.data[0].CreatedAt
					// data.timeStamp = new Date(time).getTime()
					// 获取总价
					// if(res.data.length>1){
						// let min = res.data
						// let values = min.reduce((total, item) => {
						// 	return total + item.price*item.number
						// },0);
						// data.totalPrice = values

				}

			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		background: linear-gradient( 180deg, #FFE6C4 0%, #F7F7F7 100%);
		::v-deep .uni-navbar__header-btns-left{
			width: 30px !important;

		}
		.navbartitle{
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			display: flex;
			align-items: center;
		}
		.decs{
			font-size: 28upx;
			color: #FFF;
			padding-left: 50px;
			margin-top: 10upx;
		}
		.content{
				padding: 30upx;
			.header{
				background-color: #FFF;
				padding: 30upx;
				margin-top: 30upx;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				image{
					width: 60upx;
					height: 60upx;
				}
				.right{
					width: calc(100% - 100upx);
					color: #333;
					.info{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.infos{
							color: #999;
							font-size: 24upx;
							.name{
								font-weight: 400;
								font-size: 28rpx;
								color: #2D2D2D;
								margin-right: 10upx;
							}
						}
					}
					.address{
						margin-top: 10upx;
						font-size: 28upx;
					}
				}
			}
			.goodsbox{
				padding: 30upx;
				margin-top: 30upx;
				border-radius: 16rpx;
				background-color: #fff;
				.business {
					display: flex;
					align-items: center;
					font-size: 32upx;
					font-weight: bold;
					padding: 0 20upx 20upx 20upx;
					border-bottom: 1upx solid #f5f5f5;
					margin-bottom: 30upx;

					image {
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
						margin-right: 10upx;
					}
				}
				.goods{
					display: flex;
					margin-bottom: 30upx;
					image{
						width: 142rpx;
						height: 142rpx;
						border-radius: 16rpx;
						margin-right: 24rpx;
					}
					.right{
						width: calc(100% - 180rpx);
						.name{
							font-weight: 400;
							font-size: 28rpx;
							color: #2D2D2D;
						}
						.gg{
							color: #999999;
							font-size: 24upx;
							margin: 20upx 0;
						}
						.num{
							color: #999999;
							font-size: 24upx;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
				.titlebox{
					display: flex;
					justify-content: space-between;
					color: #333333;
					margin: 30upx 0;
					.titleboxl{
						font-size: 28upx;
						font-weight: 500;
					}
					.titleboxr{
						font-size: 28upx;
						font-weight: bold;
					}
					.uni-input{
						font-size: 28upx;
						width: calc(100% - 150upx);
					}
				}
				.titleboxs{
					margin-top: 30upx;
					padding-top: 30upx;
					border-top: 1upx solid #f5f5f5;
					.titleboxr{
						font-size: 36upx;
						font-weight: bold;
						color: #FA301B;
					}
				}
				.titleboxss{
					display: flex;
					padding: 20upx 0;
					font-size: 29upx;
					color: #333333;
          justify-content: space-between;
					.titleboxsl{
						margin-right: 20upx;
					}
				}
				.paylist{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin:20upx 0 ;
					.left{
						display: flex;
						align-items: center;
						image{
							width: 40upx;
							height: 40upx;
							margin-right: 20upx;
						}
					}

				}
			}
		}
		.footer{
			width: calc(100% - 60upx);
			padding: 30upx;

			position: fixed;
			background-color: #fff;
			left:0;
			bottom: 0;
			display: flex;
			justify-content: flex-end;
			.left{
				font-size: 24upx;
				color: #666;
				padding: 10upx 30upx;
				border-radius: 30upx;
				border: 1upx solid #666;
			}
			.right{
				font-size: 24upx;
				color: #fff;
				padding: 10upx 40upx;


        width: 690rpx;
        height: 72rpx;
        background: #F63B29;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        margin: 0 auto;
			}
		}
	}
  .reason{
    padding: 30upx;
    margin-top: 30upx;
    background-color: #FFF;
    border-radius: 16upx;
  }

</style>
